<template>
  <!-- <el-dialog :title="title" :visible.sync="visible" :before-close="handleClose" :append-to-body="true" :fullscreen="isFull" :destroy-on-close="true" :show-close="true" :modal="isModal" class="xs-dialog" @close="cancel"> -->
  <el-dialog :title="title" :width="width" :close-on-click-modal="false" :visible.sync="visible" :before-close="handleClose" :append-to-body="true" :lock-scroll="false" :fullscreen="isFull" :destroy-on-close="true" :show-close="true" :modal="isModal" @close="cancel">

    <div class="el-dialog-div">
      <slot></slot>
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button v-if="isShowConfirm" type="primary" @click="confirm">确 定</el-button>
      <el-button @click="cancel">取 消</el-button>
    </div>
  </el-dialog>

</template>

<script>
export default {
  name: "z-dialog",
  props: {
    title: { type: String, default: "" },
    visible: { type: Boolean, default: false },
    isFull: { type: Boolean, default: false },
    isModal: { type: Boolean, default: true },
    toBody: { type: Boolean, default: true },
    isShowConfirm: { type: Boolean, default: true },
    width: { type: String, default: '50%' }
  },
  methods: {
    handleClose() {
      this.$nextTick((e) => this.$emit("update:visible", false));
    },
    beforeClose() {
      this.$nextTick((e) => this.$emit("update:visible", false));
    },
    confirm() {
      this.$emit("confirm");
    },
    cancel() {
      this.$nextTick((e) => this.$emit("update:visible", false));
      this.$emit("cancel");
    }
  },
  created() {

  }
};
</script>

<style scoped lang="scss">
.el-dialog-div {
  // height: 70vh;
  max-height: 70vh;
  overflow: auto;
  padding-right: 30px;
}
.xs-dialog {
  &.sub-dialog {
    z-index: 9998 !important;
  }
}
</style>
